<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{ message.toUpperCase() }}</h1>
    <h1>{{ news.toUpperCase() }}</h1>
    <h1>{{10 + 10}}</h1>
    <h1>{{age + 30}}</h1>
    <h1>{{showAge()}}</h1>
    <h1>{{age >= 18 ? '成年' : '未成年'}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    * 最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法{{}} (即双大括号)：
    * 双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
    * */
    const app = Vue.createApp({
        data() {
            return {
                message: "helloVue3",
                news: "helloVue2",
                age: 18
            }
        },
        methods: {
            showAge() {
                return this.age + 100
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
